{% extends "base/base.html" %}

{% comment %}

 Copyright 2013 - Tom Alessi

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and 
 limitations under the License.

{% endcomment %}

{% block content %}

{% if updates %}
<script>
  // Set edit style to inline instead of popup
  $.fn.editable.defaults.mode = 'inline';
</script>
{% endif %}

<form method="POST" action="/admin/i_update">
{% csrf_token %}


<div class="row">
  {# This is a large-3 side nav #}
  {% include "admin/side_nav.html" %}

  <div class="large-9 columns">

    <div class="row">
      <div class="large-12 columns">
        <h1>Update Incident</h1>
        <p>To update this incident, complete the relevant fields below.</p>
        <hr>
      </div>
    </div>

    {# This is row consisting of 12 columns that will display all messages passed in the request #}
    {% include "admin/messages.html" %}

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Incident Updates</span>
        &nbsp;<b><span id="update_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Enter an update about the incident, if desired.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.update.errors %}error{% endif %}">
        <textarea id="update" name="update" placeholder="Enter Incident Update" maxlength="1000">{% if form.update.data %}{{form.update.data}}{% endif %}</textarea>
        {% if form.update.errors %}
        <br><span class="err">{% for error in form.s_date.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    {% if updates %}
      <div class="spacer_small"></div>

      <div class="row">
        <div class="large-12 columns">
          <label>
            <span id="expand_updates" title="Modify previous event updates" class="foundicon-genenc-plus foundicon_container_expand"></span>&nbsp;Manage previous updates
          </label>
          <span class="sublabel">Edit or delete previously entered incident updates.</span>
          <div id="updates" style="display: none; padding: 15px 15px 15px 25px;">
            {% for update in updates %}
             <a href="/admin/i_update_delete?event_id={{id}}&id={{update.id}}" title="Delete update"><span class="foundicon-gen-trash foundicon_container_iconlink_small_trash"></span></a><span class="updates"><b>{{update.date|date:"Y-m-d H:i e"}}</b> - <a href="#" title="Modify update" id="update_{{update.id}}">{{update.update}}</a></span>
               
             <script>
             $(document).ready(function() {
               $('#update_{{update.id}}').editable({
                     url: '/admin/update_modify',
                     tpl: '<textarea maxlength="1000"></textarea>',
                     type: 'textarea',
                     pk: '{{update.id}}',
                     name: 'update',
                     inputclass: 'x_editable_update',
                     params: { csrfmiddlewaretoken: '{{csrf_token}}'},
                     error: function(response, newValue) {
                       return response.responseText;
                     }
                 });
             });
             </script>

             <br><br>

            {% endfor %}
          </div>
   
          <script>
           // Expand Slider
            $(function() {
              $("#expand_updates").click(function () {
                 $("#updates").slideToggle("fast");
                 if ($(this).hasClass("foundicon-genenc-plus")) {
                  //Remove the plus class and add the minus one
                  $(this).removeClass("foundicon-genenc-plus");
                  $(this).addClass("foundicon-genenc-minus");
                 } else if ($(this).hasClass("foundicon-genenc-minus")) {
                  // Remove the minus class and add the plus one
                  $(this).removeClass("foundicon-genenc-minus");
                  $(this).addClass("foundicon-genenc-plus");
                 }
              });
            });
          </script>

        </div>
      </div>
    {% endif %}

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Incident Description</span>
        &nbsp;<b><span id="description_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Update the incident description, if desired.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.description.errors %}error{% endif %}">
        <textarea id="description" name="description" placeholder="Enter incident description" maxlength="1000">{% if form.description.data %}{{form.description.data}}{% else %}{% if details.0.description %}{{details.0.description}}{% endif %}{% endif %}</textarea>
        {% if form.description.errors %}
        <br><span class="err">{% for error in form.description.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-3 columns">
        <div class="row">
          <div class="large-12 columns">
            <span class="radius secondary label">Start Date/Time</span><br>
            <div class="sublabel_container"><span class="sublabel">Update the incident start date/time.</span></div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.s_date.errors %}error{% endif %}">
            <input type="text" name="s_date" id="s_date" class="date" placeholder="Enter date" value="{% if form.s_date.data %}{{form.s_date.data}}{% else %}{{details.0.start|date:"Y-m-d"}}{% endif %}"/>
            {% if form.s_date.errors %}
            <span class="err">{% for error in form.s_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}  
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.s_time.errors %}error{% endif %}">
            <input type="text" name="s_time" id="s_time" class="date" placeholder="Enter time" value="{% if form.s_time.data %}{{form.s_time.data}}{% else %}{{details.0.start|date:"H:i"}}{% endif %}"/>
            {% if form.s_time.errors %}
            <span class="err">{% for error in form.s_time.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %} 
          </div>
        </div>
      </div>

      <div class="large-3 columns">
        <div class="row">
          <div class="large-12 columns">
            <span class="radius secondary label">End Date/Time</span><br>
            <div class="sublabel_container"><span class="sublabel">Update the incident end date/time (if already resolved).</span></div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.e_date.errors %}error{% endif %}">
            <input type="text" name="e_date" id="e_date" class="date" placeholder="Enter date" value="{% if form.e_date.data %}{{form.e_date.data}}{% else %}{{details.0.end|date:"Y-m-d"}}{% endif %}"/>
            {% if form.e_date.errors %}
            <span class="err">{% for error in form.e_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}  
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.e_time.errors %}error{% endif %}">
            <input type="text" name="e_time" id="e_time" class="date" placeholder="Enter time" value="{% if form.e_time.data %}{{form.e_time.data}}{% else %}{{details.0.end|date:"H:i"}}{% endif %}"/>
            {% if form.e_time.errors %}
            <span class="err">{% for error in form.e_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %} 
          </div>
        </div>
      </div>

      <div class="large 6 columns"></div>

    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Email</span><br>
        <div class="sublabel_container"><span class="sublabel">Select the checkbox to broadcast an email to the specified recipient when this incident form is saved.{% if not email_enabled %}  This option is currently disabled because global email notifications are disabled - enable them <a href="/admin/email_config">here</a>.{% endif %}</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-6 columns">
        <label><input type="checkbox" {% if not email_enabled %}disabled{% endif %} name="broadcast" {% if form.broadcast.data %}checked{% endif %} />
        Broadcast Email On Save</label>
        {% if form.broadcast.errors %}
        <span class="err">{% for error in form.broadcast.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
        <select name="email_id" class="email" {% if not email_enabled == 1 %}disabled{% endif %}>
          {% if not email_enabled %}
            <option disabled selected>-- Email Functionality Disabled --</option>
          {% else %}
            <option disabled selected>Select Email</option>
          {% endif %}
         {% for email in emails %}
          {# We need to check if its a failed form submit and then if it set in the db #}
          {% if form.email_id.data|slugify == email.id|slugify %}
            <option value="{{email.id}}" {% if email_enabled %}selected="true"{% endif %}>{{email.email}}</option>
          {% else %} 
            {% if details.0.event_email__email__id == email.id %}
              <option value="{{email.id}}" {% if email_enabled %}selected="true"{% endif %}>{{email.email}}</option>
            {% else %}
              <option value="{{email.id}}">{{email.email}}</option>
            {% endif %}
          {% endif %}
         {% endfor %}
         </select>
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Services Impacted</span><br>
        <div class="sublabel_container"><span class="sublabel">Select all services that are impacted by this incident.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        {% for row in services %}
          {# See if this service was previously selected and this is a failed form submit #}
          {# On a failed form the list is unicode values and on a GET they are ints so we have to check both #}
          <label><input type="checkbox" name="service" value="{{row.id}}" {% if row.id|slugify in affected_svcs %}checked{% else %}{% if row.id in affected_svcs %}checked{% endif %}{% endif %}/>
          {{row.service_name}}</label>
        {% endfor %}
        {% if form.service.errors %}
        <span class="err">{% for error in form.service.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_small"></div>

    <div class="row">
      <div class="large-12 columns">
        <input type="submit" class="small button secondary" value="save"/>
      </div>
    </div>
     
  </div>
</div>

<input type="hidden" name="id" value="{{id}}">
</form>



<script type="text/javascript">

   // Date Pickers and Submit
   $(function() {

      //Start Date
      $("#s_date").datepicker({dateFormat: 'yy-mm-dd'});

      //Start Time
      $("#s_time").timepicker({
          hourGrid: 4,
          minuteGrid: 10
      });

      //End Date
      $("#e_date").datepicker({dateFormat: 'yy-mm-dd'});

      //End Time
      $("#e_time").timepicker({
          hourGrid: 4,
          minuteGrid: 10
      });
   });

  // Textarea counters
  $("#update").keyup(function(){
    $("#update_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });

  $("#description").keyup(function(){
    $("#description_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });

</script>



{% endblock %}



